<template>
  <div class="number"  :style="`background-image: url('${memberBackgroundimg[0]}')`">
    <div class="container">
      <div class="teachers">
        <div class="xhrw">
          <img
            class="xhrwimg1"
            v-lazy="memberBackgroundimg[1]"
            alt=""
            loading="lazy"
          />
          <img
            class="xhrwimg2"
            v-lazy="memberBackgroundimg[2]"
            alt=""
            loading="lazy"
          />
          <img
            class="xhrwimg3"
            v-lazy="memberBackgroundimg[3]"
            alt=""
            loading="lazy"
          />
          <img
            class="xhrwimg4"
            v-lazy="memberBackgroundimg[4]"
            alt=""
            loading="lazy"
          />
        </div>
        <div class="teachersimg">
          <!-- <div class="left"> -->
          <div
            class="left-top boxq location"
            v-for="(item, index) in numberList[0]"
            :key="index"
          >
            <img v-lazy="item.image" alt="" loading="lazy" />
            <div class="left-top-text">
              <div class="top-text">
                <h1>{{ item.name }}</h1>
                <el-tag
                  v-for="(word, wordIndex) in getTitle(item.title)"
                  :key="wordIndex"
                  effect="plain"
                  class="tag"
                >
                  {{ word }}
                </el-tag>
              </div>
              <div style="display: flex">
                <p>{{ item.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="students">
        <div
          class="studentsimg"
          v-for="(item, index) in numberList[1]"
          :key="index"
        >
          <div class="studentsimg-inner">
            <div class="front">
              <img
                v-lazy="item.image"
                alt="学生图片"
                style="width: 100%; height: 100%"
                loading="lazy"
              />
            </div>
            <div class="back">
              <p>{{ item.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <myFooter />
  </div>
</template>

<script>
import { getTeachers, searchForOutstandingMembers } from "@/api/cms/cms";
import myFooter from "@/components/MyFooter.vue";

export default {
  name: "numberList",
  components: {
    myFooter,
  },
  data() {
    return {
      tachersList: [], //轮播图数据
      theFirstTwoTacher: [], //前两个老师
      theBehindTwoTacher: [], //后两个老师
      students: [], //学生列表数据
    };
  },
  props: {
    //numberList[0]是老师，numberList[1]是学生
    numberList: {
      type: Array,
      required: true,
    },
    memberBackgroundimg: {
      type: Array,
      required: true,
    },
  },
  mounted() {

  },
  methods: {
    //获取指导老师列表
    /*     getTeachers() {
      getTeachers(1, 5).then((res) => {
        console.log(res);
        if (res.code == 20000) {
          this.teachersList = res.data.list.records;
          // 重置前两个和后两个教师数组
          this.theFirstTwoTacher = [];
          this.theBehindTwoTacher = [];

          // 分割教师信息到两个不同的数组
          this.teachersList.forEach((e, index) => {
            if (index < 2) {
              // 前两个老师
              this.theFirstTwoTacher.push(e);
            } else if (index >= 2 && index < 4) {
              // 后两个老师（从第三个开始）
              this.theBehindTwoTacher.push(e);
            }
          });
        }
      });
    }, */
    //分隔头衔
    getTitle(title) {
      if (typeof title === "string") {
        // 使用正则表达式分割字符串，匹配逗号或斜杠
        const words = title
          .split(/，\s*|\//)
          .map((w) => w.trim())
          .filter((w) => w.length > 0);
        return words;
      }
    },
    //获取学生列表
    /*     getStudents() {
      searchForOutstandingMembers(1, 10).then((res) => {
        console.log(res);
        if (res.code === 20000) {
          this.students = res.data.list.records;
        }
      });
    }, */
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.studentsimg:nth-child(odd) {
  animation-name: circleUp;
  animation-duration: 1.5s;
  animation-fill-mode: both;
  box-shadow: 16px 8px 6px rgba(0, 0, 0, 0.3);
}
.studentsimg:nth-child(even) {
  animation-name: circleDown;
  animation-duration: 1.5s;
  animation-fill-mode: both;
  box-shadow: 16px 8px 6px rgba(0, 0, 0, 0.3);
}
.xhrw {
  width: 700px;
  height: 650px;
  position: relative;
}
.xhrwimg1 {
  width: 400px;
  margin-left: 10vh;
}
.xhrwimg2 {
  width: 300px;
  margin-top: 20px;
  margin-left: 50vh;
}
.xhrwimg3 {
  height: 300px;
  position: absolute;
  left: 6vw;
  top: 12vw;
}
.xhrwimg4 {
  height: 300px;
  position: absolute;
  left: 15vw;
  top: 17vw;
}
.number {
  width: 100%;
  height: 100%;
  background-size: cover; /* 确保图片覆盖整个元素，可能会被裁剪 */
  background-position: center; /* 图片居中显示 */
  background-repeat: no-repeat; /* 不重复背景图片 */
}
.container {
  padding: 35px;
  height: 900px;
  width: 100%;
  background-color: #f9feffbd;
}
.teachers {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 450px;
}
.teachersimg {
  position: relative;
  width: 775px;
  height: 500px;
}
.teachersimg .left {
  animation-name: fadeInUp;
  animation-duration: 1.5s;
  animation-fill-mode: both;
  margin-right: 10px;
}
.teachersimg .right {
  animation-name: fadeInDown;
  animation-duration: 1.5s;
  animation-fill-mode: both;
}

.boxq {
  border-radius: 16px;
  height: 230px;
  width: 370px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

.teachersimg .left-top {
  position: absolute;
}
/* 每个老师的定位 */
.location:nth-child(1) {
  top: 0;
  left: 0;
}
.location:nth-child(2) {
  top: 0;
  right: 0;
}
.location:nth-child(3) {
  bottom: 0;
  left: 0;
}
.location:nth-child(4) {
  bottom: 0;
  right: 0;
}

.left-top:hover .left-top-text {
  animation-name: textUp;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.left-top:hover img {
  animation-name: imgUp;
  animation-duration: 1s;
  animation-fill-mode: both;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgb(255 252 247 / 84%),
    #f8d8cb
  );
}
.left-top:not(:hover) img {
  animation-name: imgDown;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.left-top-text:not(:hover) {
  animation-name: textDown;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.top-text {
  width: 104%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: -10px;
}
.tag {
  margin-right: 5px;
  margin-left: 2px;
}
.left-top-text {
  padding: 10px;
  position: absolute;
  top: 150px;
  height: 325px;
  width: 100%;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgb(255 252 247 / 84%),
    #f8d8cb
  );
}
.teachersimg img {
  height: 100%;
}

.students {
  display: flex;
  /* margin-left: 60px; */
  margin-top: 90px;
}
.studentsimg {
  width: 200px;
  height: 200px;
  margin-left: 35px;
  background-color: white;
  border-radius: 50%;
  position: relative;
  perspective: 1000px; /* 3D空间 */
  cursor: pointer;
  overflow: hidden; /* 确保图片不会超出容器边界 */
}
.studentsimg-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d; /* 保持3D */
  position: relative;
}
.studentsimg:hover .studentsimg-inner {
  transform: rotateY(180deg); /* 沿Y轴翻转 */
}
.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 背面不可见 */
  border-radius: 50%; /* 设置圆形 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.back {
  transform: rotateY(180deg); /* 背面翻转 */
  background-color: #f9f9f9; /* 背面背景色 */
}
.front img {
  width: 100%;
  height: 100%;
  border-radius: 50%; /* 设置圆形 */
  object-fit: cover; /* 保证图片内容不被剪切 */
}

@keyframes fadeInUp {
  from {
    transform: translateY(-300px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeInDown {
  from {
    transform: translateY(300px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes circleUp {
  from {
    transform: translateY(-400px);
    opacity: 0;
  }
  to {
    transform: translateY(-10px);
    opacity: 1;
  }
}

@keyframes circleDown {
  from {
    transform: translateY(400px);
    opacity: 0;
  }
  to {
    transform: translateY(100px);
    opacity: 1;
  }
}
/* 定义文字上升动画 */
@keyframes textUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-250px);
  }
}
/* 定义文字下降动画 */
@keyframes textDown {
  from {
    transform: translateY(-250px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes imgUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50px);
  }
}
/* 定义图片下降动画 */
@keyframes imgDown {
  from {
    transform: translateY(-50px);
  }
  to {
    transform: translateY(0);
  }
}

.contact-box {
  line-height: 30px;
  padding: 10px;
  max-width: 500px;
  /* 限制盒子的宽度 */
  justify-content: center; /* 水平居中对齐 */
  text-align: justify;
}
</style>
